.emp-detail {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .79);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;

    .emp-detail-box {
        width: 880px;
        height: 576px;
        padding: 20px;
        padding-bottom: 0px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        position: relative;
        font-size: 0;

        .center-avatar {
            width: 190px;
            height: 190px;
            position: absolute;
            top: -95px;
            left: 50%;
            border-radius: 95px;
            transform: translate(-50%, 0);
            overflow: hidden;
            border: 2px solid #fff;

            img {
                width: 100%;
                // height: 100%;
                border-radius: 95px;
            }
        }

        .review-cont,
        .reward-cont {
            display: inline-block;
            vertical-align: top;
            width: 45%;

            .span-line {
                width: 100%;

                .span-line-wrap {
                    width: 100px;
                    height: 2px;
                    background: #000;
                }
            }

            .cont-info {
                margin-bottom: 34px;

                .cont-name {
                    font-size: 26px;
                    margin-bottom: 10px;
                }

                .emp-job,
                .cont-desc {
                    font-size: 18px;
                    margin-top: 10px;

                    .call-info {
                        font-size: 12px;
                        color: #00b870;
                        margin-left: 12px;
                    }
                }
            }

            .service-emp,
            .secret {

                .tit,
                .tit-desc {
                    font-size: 18px;
                    margin-bottom: 20px;
                }

                .tit-desc {
                    font-size: 12px;
                    color: #00b870;
                }

                .span-line {
                    margin-bottom: 16px;

                    .span-line-wrap {
                        width: 34px;
                    }
                }

                .rate {
                    margin-bottom: 30px;
                }
            }

            .secret {
                .ratiing-text {
                    width: 100%;

                    textarea {
                        padding: 5px;
                        font-size: 12px;
                        width: 100%;
                        height: 134px;
                        border: 1px solid #000;
                    }
                }
            }
        }

        .reward-cont {
            display: inline-block;
            width: 45%;
            text-align: right;
            float: right;

            .span-line {
                .span-line-wrap {
                    display: inline-block;
                }
            }

            .reward-bill {
                text-align: left;

                .change-span {
                    span {
                        font-size: 18px;
                        display: inline-block;
                        padding: 5px 0;
                        margin-right: 10px;
                        border-bottom: 2px solid #fff;
                        cursor: pointer;

                        &.active {
                            border-bottom-color: #00b870;
                        }
                    }
                }

                .ph-list {
                    max-height: 330px;
                    overflow: hidden;
                    overflow-y: auto;
                    padding-top: 20px;

                    .list-cont {
                        ul {
                            li {
                                display: flex;
                                justify-content: space-around;

                                .cup-icon {
                                    display: inline-block;
                                    width: 30px;
                                    height: 30px;
                                    vertical-align: middle;
                                    text-align: center;
                                    line-height: 30px;
                                    margin-right: 10px;

                                    .cup-no {
                                        display: inline-block;
                                        font-size: 12px;
                                        width: 20px;
                                        height: 20px;
                                        background: #fff;
                                        border-radius: 10px;
                                        color: #333;
                                        text-align: center;
                                        line-height: 20px;
                                    }
                                }

                                .ph-item-info {
                                    width: 60%;
                                    display: inline-block;
                                    height: 30px;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-between;
                                    vertical-align: middle;

                                    .ph-item-name {
                                        width: 95%;
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        font-size: 14px;
                                        color: #00b870;
                                    }

                                    .ph-item-desc {
                                        font-size: 12px;
                                    }

                                }

                                .amount {
                                    width: calc(40% - 30px);
                                    height: 30px;
                                    line-height: 30px;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    display: inline-block;
                                    text-align: right;
                                    font-size: 16px;
                                    color: red;
                                }
                            }

                            .line-wrap {
                                width: 100%;
                                text-align: left;
                                padding: 15px 0;
                                padding-left: 9px;

                                .line {
                                    display: inline-block;
                                    width: 12px;
                                    height: 2px;
                                    background: #000;
                                }
                            }
                        }
                    }
                }

                .span-cont {
                    width: 100%;
                    display: flex;
                    margin-top: 30px;

                    .tit {
                        width: 14%;
                        font-size: 16px;
                    }

                    .goods {
                        width: 80%;
                        text-align: left;

                        .reward-item-out-wrap {
                            display: inline-block;
                            vertical-align: middle;
                            width: 100%;
                            height: 200px;
                            overflow: hidden;

                            .reward-item-wrap {
                                display: inline-block;
                                vertical-align: middle;
                                height: 200px;
                                overflow-y: scroll;

                                li.reward-item {
                                    border: 1px solid #dcdcdc;
                                    width: 90px;
                                    height: 90px;
                                    margin-right: 9px;
                                    margin-bottom: 9px;
                                    display: inline-block;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        cursor: pointer;
                                    }

                                    .goods-name {
                                        display: inline-block;
                                        width: 100%;
                                        text-align: center;
                                        font-size: 14px;
                                    }

                                    &.active {
                                        border: 1px solid #00b870;
                                    }
                                }
                            }
                        }
                    }

                    .change-count {
                        display: flex;
                        align-items: center;
                        span {
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            vertical-align: middle;
                            cursor: pointer;

                            &.jian,
                            &.plus {
                                background: url("./../../static/images/jian.png") left top;
                                background-size: contain;
                            }

                            &.plus {
                                background: url("./../../static/images/plus.png") left top;
                                background-size: contain;
                            }
                        }

                        input {
                            // display: none;
                            width: 30px !important;
                            height: 16px !important;
                            font-size: 12px;
                            line-height: 16px;
                            text-align: center;
                        }

                        .count {
                            font-size: 16px;
                            font-weight: 500;
                            vertical-align: middle;
                            padding: 0 10px;
                        }
                    }

                    .now-amount {
                        display: inline-block;
                        font-size: 14px;
                        line-height: 16px;
                        vertical-align: bottom;

                        .amount {
                            span {
                                color: #f55701;
                                font-size: 26px;
                                font-weight: 400;
                            }

                            i {
                                color: #999;
                                font-style: normal;
                                vertical-align: bottom;
                                margin-left: 5px;
                                display: none;
                            }
                        }
                    }
                }
            }
        }

        .head {
            font-size: 0px;
            padding-bottom: 20px;

            .avatar {
                display: inline-block;
                width: 80px;
                height: 80px;
                background: #fff;
                vertical-align: middle;
                margin-right: 14px;
                overflow: hidden;
                // box-shadow:1px 1px 0px #f0f0f0;
                border: 1px solid #f0f0f0;

                img {
                    width: 100%;
                    // height: 100%;
                }
            }

            .cont-info {
                display: inline-block;
                vertical-align: middle;

                .cont-name {
                    .name {
                        font-size: 16px;
                        vertical-align: middle;

                        b {
                            font-size: 14px;
                            font-weight: 300;
                            color: #999;
                        }
                    }

                    .star {
                        vertical-align: middle;
                    }
                }

                .reward {
                    font-size: 14px;

                    .look-reward-detail {
                        font-size: 12px;
                        color: #27a9f4;
                        border: 1px solid #27a9f4;
                        border-radius: 2px;
                        padding: 0 3px;
                        margin-left: 14px;
                        cursor: pointer;
                    }
                }
            }
        }

        .big-avatar {
            width: 100%;
            height: 344px;
            margin-bottom: 20px;
            background: #f5f5f5;
            overflow: hidden;
            font-size: 0;

            &.center {
                text-align: center;
            }

            .avatar-img {
                width: 344px;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
                overflow: hidden;
                // box-shadow:1px 1px 0px #f0f0f0; 
                border: 1px solid #f0f0f0;

                img {
                    width: 100%;
                    // height: 100%;
                }

            }


            .reward-detail {
                display: inline-block;
                vertical-align: middle;
                width: 50%;
                height: 100%;

                .detail-tit {
                    background: #27a9f4;
                    height: 40px;
                    line-height: 40px;
                    color: #fff;
                    font-size: 16px;
                    text-align: center;
                }

                .reward-list {
                    height: calc(100% - 40px);
                    overflow: auto;
                    margin-right: -18px;

                    .loader {
                        text-align: center;
                        font-size: 14px;
                        color: #999;
                    }

                    ul {
                        li {
                            span {
                                vertical-align: middle;

                                &.wechat-name {
                                    padding-left: 34px;
                                    padding-right: 20px;
                                }
                            }

                            .list-index {
                                display: inline-block;
                                padding-left: 20px;
                                max-width: 200px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }

                            line-height: 30px;
                            padding: 3px;
                            padding-right: 20px;
                            font-size: 16px;
                            color: #666;
                            box-sizing: border-box;

                            .goods {
                                display: inline-block;
                                vertical-align: middle;

                                ul {
                                    li {
                                        line-height: 0;
                                        padding: 0;
                                        display: inline-block;

                                        img {
                                            width: 30px;
                                            height: 30px;
                                        }
                                    }
                                }
                            }

                            &:nth-child(even) {
                                background: #e6e4e5;
                            }

                            &:nth-child(1) {
                                color: #f55701;
                            }

                            &:nth-child(2) {
                                color: #9c07d1;
                            }

                            &:nth-child(3) {
                                color: #27a9f4;
                            }
                        }
                    }
                }
            }
        }

        .bottom {
            height: 70px;
            text-align: center;
            // border-top: 1px solid #ddd;
            position: relative;
            font-size: 16px;
            margin-top: 20px;

            .button-box {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                button {
                    display: inline-block;
                    width: 120px;
                    height: 40px;
                    background: #ddd;
                    color: #666;
                    cursor: pointer;

                    &.call {
                        background: #27a9f4;
                        color: #fff;
                    }

                    &.review {
                        margin-right: 50px;
                        background: #00b870;
                        color: #fff;
                    }

                    &.reward-money {
                        background: #fea724;
                        color: #fff;
                    }
                }
            }
        }

        .close {
            display: inline-block;
            font-size: 20px;
            color: #fff;
            position: absolute;
            top: -10px;
            right: -30px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

    }

    @media screen and (min-width: 1920px) {
        .emp-detail-box {
            width: 1000px;
            height: 600px;
            padding: 30px;

            .big-avatar {
                width: 100%;
                height: 480px;
                margin-bottom: 20px;
                overflow: hidden;

                .avatar-img {
                    width: 480px;
                    height: 100%;

                    img {
                        width: 100%;
                        // height: 100%;
                    }
                }

                .reward-detail {
                    width: 420px;
                    height: 100%;
                }
            }
        }
    }

    .review-him {
        width: 728px;
        height: 500px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;

        &.reward-him {
            height: 500px !important;

            .login-box {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .5);
                text-align: center;
                z-index: 99999;
                position: absolute;
                top: 0;
                left: 0;

                .login-cont {
                    background: #fff;
                    width: 80%;
                    height: 400px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);

                    .login-tit {
                        text-align: center;
                        font-size: 18px;
                        color: #fff;
                        background: #27a9f4;
                        padding: 10px 0;
                    }

                    .login-info {
                        padding: 5% 0;
                    }

                    .count-down {
                        height: 30px;
                        margin-bottom: 10px;
                        font-size: 18px;
                        color: red;
                    }

                    span {
                        display: inline-block;
                        width: 200px;
                        height: 200px;

                    }

                    i.close {
                        color: #fff;
                        font-size: 20px;
                        display: inline-block;
                        width: 40px;
                        height: 40px;
                        position: absolute;
                        top: -3%;
                        right: -6%;
                        font-style: normal;
                        cursor: pointer;
                    }
                }


            }
        }

        .review-box {
            position: relative;
            overflow: hidden;

            .arrow-back {
                height: 36px;
                line-height: 36px;
                border: 1px solid #f0f0f0;
                border-radius: 18px;
                padding: 0 20px;
                font-size: 16px;
                cursor: pointer;
                position: absolute;
                top: 50%;
                left: 20px;
                transform: translate(0, -50%);
            }

            .review-head {
                background: #27a9f4;
                height: 100px;
                font-size: 20px;
                color: #fff;
                line-height: 80px;
                text-align: center;
                margin-bottom: 20px;
                position: relative;

                .arrow-back {
                    height: 36px;
                    line-height: 36px;
                    border: 1px solid #f0f0f0;
                    border-radius: 18px;
                    padding: 0 20px;
                    font-size: 16px;
                    cursor: pointer;
                    position: absolute;
                    top: 50%;
                    left: 20px;
                    transform: translate(0, -50%);
                }

                .head-tit {
                    position: absolute;
                    height: 50px;
                    line-height: 30px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 16px;

                    b {
                        font-size: 20px;
                    }
                }
            }

            .review-info {
                width: 360px;
                height: 360px;
                overflow: hidden;
                margin-left: 20px;

                .avatar {
                    display: inline-block;
                    width: 100%;
                    // height: 100%;
                    background: #fff;
                    // box-shadow:1px 1px 0px #f0f0f0;
                    border: 1px solid #f0f0f0;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                }

                .cont-name {
                    padding: 20px 0 24px 0;
                    font-size: 20px;
                    color: #666;
                }

                .review-star {
                    padding-bottom: 30px;
                    border-bottom: 1px dashed #ddd;

                    .icon-star_full {
                        cursor: pointer;
                        font-size: 30px;
                    }
                }
            }

            .review-right {
                width: 308px;
                height: 360px;
                font-size: 14px;
                background: #f6f6f6;
                margin-right: 20px;
                padding-left: 15px;
                position: relative;

                .review-reward {
                    position: relative;
                    overflow: hidden;
                    padding-top: 20px;

                    .review-tit {
                        vertical-align: middle;
                        margin-right: 9px;
                        font-size: 14px;
                    }

                    .reward-item-out-wrap {
                        display: inline-block;
                        vertical-align: middle;
                        width: 72%;
                        height: 130px;
                        overflow: hidden;

                        .reward-item-wrap {
                            margin-right: -18px;
                            display: inline-block;
                            vertical-align: middle;
                            // width: 100%;
                            height: 130px;
                            overflow-y: scroll;

                            li.reward-item {
                                border: 1px solid #eee;
                                width: 60px;
                                height: 60px;
                                margin-left: 9px;
                                margin-bottom: 9px;
                                display: inline-block;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    cursor: pointer;
                                }

                                .goods-name {
                                    display: inline-block;
                                    width: 100%;
                                    text-align: center;
                                    font-size: 14px;
                                }

                                &.active {
                                    border: 1px solid red;
                                }
                            }
                        }
                    }
                }

                .item-count {
                    vertical-align: middle;
                    padding: 30px 0;

                    .item-name {
                        vertical-align: middle;
                        margin-right: 18px;
                    }

                    input {
                        width: 50px;
                        height: 34px;
                        font-size: 12px;
                        background: #f4f4f4;
                        border: 1px solid #ddd;
                        border-radius: 2px;
                        text-align: center;
                        margin-right: 5px;
                    }

                    div.change-count {
                        display: inline-block;
                        vertical-align: middle;
                        margin-bottom: 2px;

                        span {
                            display: block;
                            width: 20px;
                            height: 17px;
                            font-size: 12px;
                            line-height: 17px;
                            text-align: center;
                            cursor: pointer;
                            border: 1px solid #ddd;

                            &.redu-count {
                                margin-top: -1px;
                            }
                        }
                    }
                }

                .reward-button {
                    position: relative;

                    button {
                        position: absolute;
                        left: 50%;
                        transform: translate(-50%);
                        cursor: pointer;
                        width: 180px;
                        height: 40px;
                        border-radius: 20px;
                        color: #fff;
                        font-size: 16px;
                        background: #27a9f4;
                    }
                }

                .now-amount {
                    padding-bottom: 34px;

                    .amount {
                        span {
                            color: #f55701;
                            font-size: 26px;
                            font-weight: 400;
                            padding-left: 18px;
                        }

                        i {
                            color: #999;
                            font-style: normal;
                        }
                    }
                }
            }

            .review-button {
                width: 308px;
                height: 360px;
                text-align: left;
                padding: 20px 0 0 30px;
                margin-right: 20px;
                position: relative;
                background: #f6f6f6;

                .right-tit {
                    font-weight: 600;
                    font-size: 20px;
                    // padding: 15px 0;
                    padding-bottom: 10px;
                    color: #333;
                }

                .rating {
                    padding-bottom: 20px;

                    .ant-radio-group {
                        .ant-radio-wrapper {
                            line-height: 1 !important;
                            font-size: 16px !important;
                            display: block;
                            text-align: left;
                            padding: 10px 0;

                            .ant-radio-inner {
                                width: 20px;
                                height: 20px;

                                &:after {
                                    top: 5px;
                                    left: 5px;
                                }
                            }

                            &:last-child {
                                padding-bottom: 0;
                            }
                        }
                    }
                }

                .ranting-emp-text {
                    display: inline-block;
                    width: 100%;

                    #rating-text {
                        display: inline-block;
                        width: 248px;
                        height: 100px;
                        border: 1px solid #ccc;
                        resize: none;
                        padding: 5px;
                        font-size: 16px;

                        &::-webkit-input-placeholder {
                            color: #ccc;
                            font-size: 16px;
                        }
                    }
                }

                button {
                    position: absolute;
                    left: 50%;
                    bottom: 20px;
                    transform: translate(-50%);
                    cursor: pointer;
                    width: 180px;
                    height: 40px;
                    border-radius: 20px;
                    color: #fff;
                    font-size: 16px;
                    background: #27a9f4;
                }
            }
        }
    }

    @media screen and (min-width: 1920px) {
        .review-him {
            width: 1000px;
            height: 630px;

            .review-info {
                width: 480px !important;
                height: 480px !important;
                margin-left: 30px !important;
                margin-top: 10px;
            }

            .review-button {
                width: 440px !important;
                height: 480px !important;
                padding: 100px 0 0 60px !important;
                margin-top: 10px !important;
            }

            &.reward-him {
                height: 630px !important;

                .review-box {
                    .review-right {
                        width: 440px;
                        height: 480px;
                        margin-right: 30px;
                        margin-top: 10px !important;

                        .review-reward {
                            padding-top: 80px;
                        }
                    }
                }
            }
        }
    }



    // @media screen and (min-width: 1920px) {

    //     .go-pay,
    //     .pay-code {
    //         width: 1000px !important;
    //         height: 610px !important;
    //     }

    //     .center {
    //         height: 200px !important;
    //         padding: 50px 30px !important;
    //         background: #eee !important;
    //         position: relative !important;

    //         .order-info-item {
    //             color: #666;

    //             &.order-gift {
    //                 padding: 40px 0 !important;
    //             }
    //         }
    //     }
    // }

    .arrow {
        position: absolute;
        z-index: 999999;
        top: 50%;
        cursor: pointer;

        i {
            font-size: 100px;
            color: #fff;
        }

        &.arrow-left {
            left: 9%;
            z-index: 999999;
            transform: translate(0, -50%);
        }

        &.arrow-right {
            right: 9%;
            transform: translate(0, -50%) rotate(-180deg);
        }
    }

    .rating-suc {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .79);
        position: absolute;
        top: 0;
        left: 0;

        .rating-suc-box {
            width: 728px;
            height: 360px;
            border-radius: 9px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;

            .avatar-img {
                width: 220px;
                height: 220px;
                border-radius: 110px;
                position: absolute;
                top: -110px;
                left: 50%;
                margin-left: -110px;
                box-shadow: 0 0 50px rgba(0, 0, 0, .5);

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 110px;
                }
            }

            .thank-info {
                .thanks {
                    font-size: 24px;
                    color: #27a9f4;
                    font-weight: 600;
                    margin-top: 170px;
                }
            }

            button {
                width: 180px;
                height: 40px;
                border-radius: 20px;
                background: #27a9f4;
                color: #fff;
                font-size: 16px;
                margin-top: 54px;
                cursor: pointer;
            }
        }
    }

    .login-box,
    .pay-box {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        text-align: center;
        z-index: 99999;
        position: absolute;
        top: 0;
        left: 0;

        .login-cont,
        .pay-cont {
            background: #fff;
            width: 300px;
            min-height: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding-top: 26px;

            .login-info,
            .pay-info {
                padding: 5% 10%;
                font-size: 18px;
                line-height: 28px;
            }

            .count-down {
                height: 30px;
                margin-bottom: 10px;
                font-size: 18px;
                color: red;
            }

            span,
            #pay-qrcode {
                display: inline-block;
                width: 250px;
                height: 250px;
            }

            #pay-qrcode {
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            i.close {
                color: #fff;
                font-size: 20px;
                display: inline-block;
                width: 40px;
                height: 40px;
                position: absolute;
                top: -3%;
                right: -11%;
                font-style: normal;
                cursor: pointer;
            }

            .suc-pay {
                display: inline-block;
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #fff;
                background: #00b870;
                margin-bottom: 10px;
                cursor: pointer;
            }
        }


    }

    .go-pay-wrap {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .79);
        text-align: center;
        z-index: 99999;
        position: absolute;
        top: 0;
        left: 0;

        .go-pay {
            width: 448px;
            height: 486px;
            padding-bottom: 66px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;

            .center-avatar {
                width: 66px;
                height: 66px;
                position: absolute;
                top: -33px;
                left: 50%;
                border-radius: 33px;
                transform: translate(-50%, 0);
                overflow: hidden;
                border: 2px solid #fff;
                z-index: 99;

                img {
                    width: 100%;
                    // height: 100%;
                    border-radius: 33px;
                }
            }

            .center {
                height: 142px;
                line-height: 142px;
                text-align: center;
                // padding: 20px 30px;
                background: #00b870;
                position: relative;
                font-size: 24px;
                color: #fff;

                .tag-info {
                    width: 281px;
                    height: 249px;
                    position: absolute;
                    top: 96px;
                    left: 50%;
                    transform: translate(-50%, -0);
                    z-index: 999;
                    font-size: 12px;
                    word-break: break-all;

                    .tag_bg {
                        position: relative;

                        .tag-bar {
                            position: absolute;
                            top: 0;
                            width: 100%;
                            height: 10px;
                            background: url("./../../static/images/tag_bar.png") left top;
                            background-size: contain;
                            z-index: 100;
                        }

                        .tag {
                            text-align: left;
                            position: absolute;
                            top: 9px;
                            left: 50%;
                            transform: translate(-50%, 0);
                            z-index: 1;
                            margin-top: -2px;
                            display: inline-block;
                            width: 215px;
                            // height: 242px;
                            height: 0px;
                            overflow: hidden;
                            opacity: 0;
                            transform-origin: top;
                            transition: all 5s;
                            background: url("./../../static/images/tag2.png") left top;
                            background-size: contain;
                            box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, .1);
                            font-size: 16px;
                            padding: 10px 5px 0 5px;
                            line-height: 16px;

                            .order-info {
                                height: 80%;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-around;
                                color: #9a9a9a;
                            }

                            .amount-info {
                                height: 20%;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                font-size: 16px;
                                color: #f55701;
                                font-weight: 600;
                                text-align: center;
                            }

                            &.show {
                                animation: move4 .5s;
                                animation-fill-mode: forwards;
                            }

                            @keyframes move4 {
                                0% {
                                    height: 0px;
                                    opacity: 0;

                                }

                                100% {
                                    height: 242px;
                                    opacity: 1;

                                }
                            }

                        }
                    }

                }

                // .center-tit {
                //     text-align: center;
                //     font-size: 18px;
                // }

                // .center-goods {
                //     text-align: center;
                //     border-radius: 5px;
                //     border-bottom: 1px dashed #ddd;

                //     .goods-img {
                //         display: inline-block;
                //         width: 174px;
                //         height: 174px;
                //         border-radius: 5px;
                //         border: 1px solid #ddd;
                //         padding: 10px;
                //         text-align: center;
                //         position: relative;

                //         img {
                //             width: 100%;
                //             height: 100%;
                //         }

                //         .goods-price {
                //             position: absolute;
                //             bottom: 0;
                //             right: 0;
                //             font-size: 20px;
                //             color: #27a9f4;
                //         }
                //     }

                //     .goods-name {
                //         padding: 10px 0;
                //     }
                // }
                .order-info-item {
                    color: #666;

                    &.order-gift {
                        padding: 16px 0 16px 0;
                    }

                    &.order-count-amount {
                        position: relative;
                        overflow: hidden;

                        .count {
                            display: inline-block;
                        }


                    }
                }

                .amount {
                    position: absolute;
                    right: 30px;
                    bottom: 26px;

                    b {
                        color: red;
                        font-size: 26px;
                        font-weight: 400;
                    }
                }

            }

            .bottom {
                width: 100%;
                position: absolute;
                bottom: 40px;
                left: 50%;
                transform: translate(-50%, 0);
                text-align: center;
                font-size: 18px;

                .bottom-tit {
                    padding-top: 40px;
                }

                .pay-img {
                    padding-bottom: 30px;

                    .pay-tit {
                        text-align: center;
                        font-size: 14px;
                        color: #000;
                        padding: 30px 0 16px 0;
                    }

                    .pay-count-down {
                        font-size: 16px;
                        color: red;
                        margin-bottom: 20px;
                    }

                    img {
                        width: 148px;
                        height: 148px;
                    }

                    .now-pay-type {
                        display: inline-block;
                        padding-right: 10px;
                        color: #333;

                        i {
                            padding-right: 6px;
                            font-size: 20px;
                        }

                        &.ali {
                            color: #55a8dc;

                            span {
                                color: #333;
                                font-size: 18px;
                            }
                        }

                        &.wechat {
                            color: #6fcd58;

                            span {
                                color: #333;
                                font-size: 18px;
                            }
                        }
                    }

                }

                .close-button {
                    text-align: center;

                    button {
                        width: 180px;
                        height: 40px;
                        border-radius: 20px;
                        color: #fff;
                        background: #27a9f4;
                        cursor: pointer;
                    }
                }

                .sel-pay-type {
                    // margin-top: 40px;
                    width: 100%;

                    .pay-type {
                        display: inline-block;
                        font-size: 20px;
                        width: 164px;
                        height: 50px;
                        color: #fff;
                        border-radius: 9px;
                        cursor: pointer;

                        .icont-wrap {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            line-height: 34px;

                            i {
                                display: inline-block;
                                font-size: 80px;
                            }

                            .pay-name {
                                display: block;
                                text-align: center;
                            }


                        }

                        &.ali {
                            background: url("./../../static/images/ali.png") left top;
                            background-size: contain;
                            margin-right: 44px;
                            position: relative;
                        }

                        &.wechat {
                            background: url("./../../static/images/wechat.png") left top;
                            background-size: contain;
                            position: relative;
                        }
                    }
                }
            }

            .close-pay {
                font-size: 20px;
                color: #fff;
                position: absolute;
                top: -10px;
                right: -30px;
                width: 20px;
                height: 20px;
                cursor: pointer;
            }

            .pay-code {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .5);
                text-align: center;
                z-index: 99999;
                position: absolute;
                top: 0;
                left: 0;

                .pay-tit {
                    text-align: center;
                    font-size: 20px;
                    color: #fff;
                    padding-top: 19%;
                }

                img {
                    width: 200px;
                    height: 200px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .cancel-pay {
                    width: 100px;
                    height: 40px;
                    position: absolute;
                    top: 70%;
                    left: 50%;
                    transform: translate(-50%, -50%);

                    button {
                        width: 100px;
                        height: 40px;
                        border-radius: 5px;
                        background: #55a8dc;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .reward-suc {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .3);
        z-index: 999999999;
        overflow: hidden;

        .reward-suc-wrap {
            .floor {
                width: 100%;
                height: 300px;
                background: url("./../../static/images/suc_floor.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                bottom: -190px;
                left: 0;
            }

            .man {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                animation: man-move .9s ease forwards;
                transform: translateY(80%);
            }

            @keyframes man-move {
                0% {
                    transform: translateY(80%);
                }

                100% {
                    transform: translateY(0%);
                }
            }

            .red-woman {
                width: 276px;
                height: 490px;
                background: url("./../../static/images/suc_red_cloth.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                bottom: -100px;
                left: 60px;
                animation: red-woman-move 9s linear infinite;
            }

            @keyframes red-woman-move {
                0% {
                    transform: translateY(-15px);
                }

                50% {
                    transform: translateY(15px);
                }

                100% {
                    transform: translateY(-15px);
                }
            }

            .laba-man {
                width: 400px;
                height: 613px;
                background: url("./../../static/images/suc_laba_man.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                bottom: -100px;
                left: 260px;
                animation: laba-man-move 19s linear infinite;
            }

            @keyframes laba-man-move {
                0% {
                    transform: translateY(-30px);
                }

                50% {
                    transform: translateY(30px);
                }

                100% {
                    transform: translateY(-30px);
                }
            }

            .black-woman {
                width: 400px;
                height: 500px;
                background: url("./../../static/images/suc_black_cloth.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                bottom: -100px;
                right: 180px;
                animation: black-woman-move 9s linear infinite;

            }

            @keyframes black-woman-move {
                0% {
                    transform: translateY(-20px);
                }

                50% {
                    transform: translateY(20px);
                }

                100% {
                    transform: translateY(-20px);
                }
            }

            .yellow-man {
                width: 300px;
                height: 550px;
                background: url("./../../static/images/suc_yellow_man.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                bottom: -100px;
                right: 0px;
                animation: yellow-man-move 15s linear infinite;
            }

            @keyframes yellow-man-move {
                0% {
                    transform: translateY(-25px);
                }

                50% {
                    transform: translateY(25px);
                }

                100% {
                    transform: translateY(-25px);
                }
            }

            .suc-pai {
                width: 360px;
                height: 85px;
                background: url("./../../static/images/suc_pai.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                top: 220px;
                left: 50%;
                transform: translate(-50%, 0);
            }

            .suc-cloud {
                width: 116px;
                height: 50px;
                background: url("./../../static/images/suc_cloud.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                top: 220px;
                left: 100px;
                animation: clound-move 19s linear infinite;
                opacity: .79;

                &.suc-cloud-2 {
                    width: 68px;
                    height: 30px;
                    position: absolute;
                    left: initial;
                    top: 380px;
                    right: 100px;
                }
            }

            @keyframes clound-move {
                0% {
                    transform: translateX(-100px);
                }

                50% {
                    transform: translateX(100px);
                }

                100% {
                    transform: translateX(-100px);
                }
            }

            .suc-flower {
                width: 100px;
                height: 100px;
                background: url("./../../static/images/suc_flower.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                top: 380px;
                left: 100px;
                transition: all .5s;
                transform-origin: center;
                animation: flower-rotate 9s linear infinite;

                &.suc-flower2 {
                    width: 180px;
                    height: 180px;
                    top: 40px;
                    left: 200px;
                }

                &.suc-flower3 {
                    width: 90px;
                    height: 90px;
                    top: 40px;
                    left: initial;
                    right: 60px;
                }

                &.suc-flower4 {
                    width: 150px;
                    height: 150px;
                    top: -50px;
                    left: 50%;
                    transform: translate(-50%, 0);
                }

                &.suc-flower5 {
                    width: 100px;
                    height: 100px;
                    top: 200px;
                    left: initial;
                    right: 180px;
                }

            }

            @keyframes flower-rotate {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            .suc-paper {
                width: 180px;
                height: 180px;
                opacity: .5;
                background: url("./../../static/images/suc_paper.png") left center no-repeat;
                background-size: contain;
                position: absolute;
                top: 260px;
                left: 250px;

                &.paper2 {
                    width: 130px;
                    height: 130px;
                    top: 170px;
                    left: initial;
                    right: 350px;
                }
            }
        }
    }
}